<template>
    <div>
        <el-radio-group v-model="selectTab" @change="radioChangedAction">
            <el-radio-button v-for="tabItem in tabs" :key="tabItem.id" :value="tabItem.id" :label="tabItem.value">{{
                tabItem.value
                }}
            </el-radio-button>
        </el-radio-group>
    </div>
</template>

<script>
	export default {
		name: 'CameraControlTabView',
		props: {
			selectedType: {
				required: true,
				type: String,
				default: '拍照'
			}
		},
		data() {
			return {
				selectTab: '拍照',
				tabs: [{
					id: 1, value: '拍照'
				}, {
					id: 2, value: '摄像'
				}]
			}
		},
		watch: {
			selectedType: function (newVal) {
				this.selectedType = newVal
				// this.$emit('select-action', newVal === '拍照' ? 1 : 0)
			}
		},
		methods: {
			radioChangedAction(e) {
				this.$emit('select-action', e === '拍照' ? 1 : 0)
			}
		}
	}
</script>

<style scoped lang="scss">

    div {
        margin-top: 10px;
        margin-bottom: 20px;
        width: 100%;
        height: 50px;
        display: flex; /*设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效*/
        display: -webkit-flex; /* Safari */
        justify-content: center; /*项目在主轴上的对齐方式*/
        align-items: center; /*项目在交叉轴上如何对齐*/
        align-content: center; /*定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用*/
    }

</style>
